*{
    margin: 0;
    padding: 0;
}
body{
    background: #edecea;
    font-size: 12px;
    font-family: "微软雅黑","宋体","黑体";
    width: 100%;
    margin: 0 auto;

}

a{
    /*display: block;*/
    text-decoration: none;	
}
/*顶部导航开始*/
.top{

    height:42px;
    background:#2d3236;
}
.top a{
    color: #fff;
}
#top_m{
    width:1190px;
    margin:0 auto;	
}
#top_l{
    margin-top:12px;
    float:left;
    width:100px;
}
#top_l1{
    margin-top:1px;
    float:left;
}
#top_l1 img{
    height: 14px;
}
#top_r{
    margin-top:12px;
    float:right;
    width:288px;
}
#top_r1{
    float:left;
    margin-top:-5px;
    width:40px;
}
#top_r ul li{
    float: left;
    display: inline-block;
    margin-right:20px;
}
/*顶部导航结束*/

/*头部开始*/
.hd{
    background:url(../images/head.png);
    height:108px;
}
.hd a {
    color:#000;
}
#hd_m{
    margin:0 auto;	
    width:1190px;
    height:100px;

}
#hd_l{
    float:left;
    margin-top:40px;
    width:172px;

}

#hd_l img{
    width:172px;
}

#hd_nav{
    margin-top:50px;
    float:left;
    margin-left:70px;

}
#hd_nav ul li{
    font-size:18px;
    float: left;
    display: inline-block;
    line-height: 30px;
    width: 76px;
    height: 30px;
    text-align: center;
}
#hd_nav ul  .active {
    background-color: rgb( 60, 179, 0 );
    border-radius: 20px;
}

#hd_r{
    margin-top:45px;
    float:right;
    width:195px;

}
.search{width:510px; margin-top: 5px; padding-right: 97px;}
.search .form_left{width: 4px; height: 37px; background: url("../images/bg1.png") -80px -469px no-repeat; }
.search form{width: 502px; height: 37px;background: url("../images/bg1.png") 0 -356px repeat-x; position: relative;}
.search .form_right{width: 4px; height: 37px; background: url("../images/bg1.png") 0 -469px no-repeat; }
.search_form input.txt{width: 420px; height:29px; line-height: 29px; border:0;  color: #999; font-size:14px;padding-left: 10px; position: absolute;top:5px; left: 0;}
.search_form input.btn{width: 71px; font-size: 14px; font-weight: bold; border: none; height: 29px; background:#FBB111 url("../images/bg1.png") 0 -396px no-repeat; cursor: pointer; position: absolute; top:5px; right: 0;}

/*头部结束*/

.search-wrapper {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(0, 0);
}


.search-wrapper .input-holder {
    overflow: hidden;
    height: 35px;
    position: relative;
    width:70px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    border-radius: 50px;
    width:195px;
    background: rgba(0,0,0,0.5);
    -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input {
    width:100%;
    padding:0px 40px 0 20px;
    opacity: 0;
    position: absolute;
    top:-5px;
    left:0px;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
    color:#FFF;
    -webkit-transform: translate(0, 60px);
    -moz-transform: translate(0, 60px);
    transform: translate(0, 60px);
    -webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    transform: translate(0, 10px);
}

.search-wrapper .input-holder .search-icon {
    border:none;
    background: rgba(255, 255, 255, 0);
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 25px;
    height:25px;
    margin: 5px;
    border-radius: 30px;
}
.search-wrapper.active .input-holder .search-icon img{
    width: 22px;
}


@media screen and (max-width: 560px) {
    .search-wrapper.active .input-holder {width:200px;}
}



